<template>
  <div class="addmod">
    <div style=" border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
      <Checkbox
        :indeterminate="indeterminate"
        :value="checkAll"
        @click.prevent.native="handleCheckAll"
      >
        选择权限
      </Checkbox>
    </div>
    <CheckboxGroup
      v-model="checkAllGroup"
      @on-change="checkAllGroupChange"
    >
      <Checkbox label="管理员"></Checkbox>
      <Checkbox label="特殊员工"></Checkbox>
      <Checkbox label="普通员工"></Checkbox>
      <Checkbox label="游客"></Checkbox>
    </CheckboxGroup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indeterminate: true,
      checkAll: false,
      checkAllGroup: ['普通员工', '游客'],
    }
  },
  methods: {
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.checkAllGroup = ['管理员', '特殊员工', '普通员工', '游客']
      } else {
        this.checkAllGroup = []
      }
    },
    checkAllGroupChange(data) {
      if (data.length === 4) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
</style>
